package cn.harry.cabinet.theme.components

import android.content.Context
import android.content.res.ColorStateList
import android.graphics.Color
import android.graphics.drawable.GradientDrawable
import android.util.AttributeSet
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import androidx.cardview.widget.CardView
import cn.harry.cabinet.R
import cn.harry.cabinet.theme.manager.NavigationThemeManager
import cn.harry.cabinet.theme.manager.ThemeManager

/**
 * 主题预览组件
 * 显示主题的导航菜单效果预览
 */
class ThemePreviewComponent @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : CardView(context, attrs, defStyleAttr) {
    
    private val miniNavContainer: LinearLayout
    private val miniNavHeader: LinearLayout
    private val miniMenuItem1: LinearLayout
    private val miniMenuItem2: LinearLayout
    private val miniMenuItem3: LinearLayout
    private val themeNameText: TextView
    private val themeDescText: TextView
    
    init {
        // 设置卡片属性
        cardElevation = 8f
        radius = 16f
        
        // 加载布局
        val view = LayoutInflater.from(context).inflate(R.layout.component_theme_preview, this, true)
        
        // 初始化组件
        miniNavContainer = view.findViewById(R.id.mini_nav_container)
        miniNavHeader = view.findViewById(R.id.mini_nav_header)
        miniMenuItem1 = view.findViewById(R.id.mini_menu_item_1)
        miniMenuItem2 = view.findViewById(R.id.mini_menu_item_2)
        miniMenuItem3 = view.findViewById(R.id.mini_menu_item_3)
        themeNameText = view.findViewById(R.id.theme_name)
        themeDescText = view.findViewById(R.id.theme_description)
    }
    
    /**
     * 设置主题预览
     */
    fun setTheme(theme: ThemeManager.Theme) {
        val colors = NavigationThemeManager.getNavigationThemeColors(theme, context)
        
        // 设置主题名称和描述
        themeNameText.text = theme.displayName
        themeDescText.text = getThemeDescription(theme)
        themeNameText.setTextColor(colors.primaryTextColor)
        themeDescText.setTextColor(colors.secondaryTextColor)
        
        // 设置导航容器背景
        setNavigationBackground(colors)
        
        // 设置导航头部
        setHeaderStyle(colors, theme)
        
        // 设置菜单项样式 - 使用固定的主题特色颜色
        setMenuItemStyle(miniMenuItem1, colors, true, theme)  // 选中状态
        setMenuItemStyle(miniMenuItem2, colors, false, theme) // 普通状态
        setMenuItemStyle(miniMenuItem3, colors, false, theme) // 普通状态
        
        // 强制设置图标颜色，确保不被其他设置覆盖
        forceSetIconColors(theme)
        
        // 延迟再次设置图标颜色，防止被DynamicThemeUpdater覆盖
        post {
            forceSetIconColors(theme)
        }
    }
    
    /**
     * 获取主题描述
     */
    private fun getThemeDescription(theme: ThemeManager.Theme): String {
        return when (theme) {
            ThemeManager.Theme.CHINA_RED -> "传统庄重 · 文化自信"
            ThemeManager.Theme.VIBRANT_ORANGE -> "活力四射 · 温暖友好"
            ThemeManager.Theme.TECH_BLUE -> "现代科技 · 专业高效"
        }
    }
    
    /**
     * 设置导航背景
     */
    private fun setNavigationBackground(colors: NavigationThemeManager.NavigationThemeColors) {
        val gradientDrawable = GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM,
            intArrayOf(colors.drawerBackground, colors.headerBackgroundStart)
        )
        gradientDrawable.cornerRadius = 12f
        miniNavContainer.background = gradientDrawable
    }
    
    /**
     * 设置头部样式
     */
    private fun setHeaderStyle(colors: NavigationThemeManager.NavigationThemeColors, theme: ThemeManager.Theme) {
        val headerGradient = GradientDrawable(
            GradientDrawable.Orientation.TL_BR,
            intArrayOf(colors.headerBackgroundStart, colors.headerBackgroundEnd)
        )
        headerGradient.cornerRadii = floatArrayOf(12f, 12f, 12f, 12f, 0f, 0f, 0f, 0f)
        miniNavHeader.background = headerGradient
        
        // 设置头部图标颜色 - 使用固定的主题特色颜色
        val headerIcon = miniNavHeader.findViewById<ImageView>(R.id.mini_header_icon)
        headerIcon?.imageTintList = ColorStateList.valueOf(getThemeIconColor(theme))
        
        // 设置头部文字颜色
        val headerTitle = miniNavHeader.findViewById<TextView>(R.id.mini_header_title)
        headerTitle?.setTextColor(colors.primaryTextColor)
        
        // 不再添加装饰元素，避免重复添加导致样式混乱
        // addHeaderDecorations(colors)
    }
    
    /**
     * 添加头部装饰元素
     */
    private fun addHeaderDecorations(colors: NavigationThemeManager.NavigationThemeColors) {
        // 左上角装饰线
        val decoration1 = View(context)
        decoration1.setBackgroundColor(colors.decorationColor1)
        val params1 = LinearLayout.LayoutParams(6, 24)
        params1.setMargins(12, 8, 0, 0)
        miniNavHeader.addView(decoration1, params1)
        
        // 右下角装饰点
        val decoration2 = View(context)
        decoration2.setBackgroundColor(colors.decorationColor2)
        val params2 = LinearLayout.LayoutParams(8, 8)
        params2.setMargins(0, 0, 12, 8)
        val dotDrawable = GradientDrawable()
        dotDrawable.setColor(colors.decorationColor2)
        dotDrawable.shape = GradientDrawable.OVAL
        decoration2.background = dotDrawable
        miniNavHeader.addView(decoration2, params2)
    }
    
    /**
     * 设置菜单项样式
     */
    private fun setMenuItemStyle(
        menuItem: LinearLayout, 
        colors: NavigationThemeManager.NavigationThemeColors, 
        isSelected: Boolean,
        theme: ThemeManager.Theme
    ) {
        // 根据菜单项ID确定使用哪个图标和文本
        val (icon, text) = when (menuItem.id) {
            R.id.mini_menu_item_1 -> {
                Pair(
                    menuItem.findViewById<ImageView>(R.id.mini_menu_icon),
                    menuItem.findViewById<TextView>(R.id.mini_menu_text)
                )
            }
            R.id.mini_menu_item_2 -> {
                Pair(
                    menuItem.findViewById<ImageView>(R.id.mini_menu_icon_2),
                    menuItem.findViewById<TextView>(R.id.mini_menu_text_2)
                )
            }
            R.id.mini_menu_item_3 -> {
                Pair(
                    menuItem.findViewById<ImageView>(R.id.mini_menu_icon_3),
                    menuItem.findViewById<TextView>(R.id.mini_menu_text_3)
                )
            }
            else -> {
                Pair(null, null)
            }
        }
        
        // 清除可能存在的动态添加的子视图（如旧的指示条）
        clearDynamicViews(menuItem)
        
        if (isSelected) {
            // 选中状态样式 - 使用包含指示条的背景，避免布局偏移
            menuItem.background = createSelectedMenuBackgroundWithIndicator(colors)
            // 选中时也使用固定的主题特色颜色，保持白色显示
            icon?.imageTintList = ColorStateList.valueOf(Color.WHITE)
            text?.setTextColor(colors.menuTextSelectedColor)
        } else {
            // 普通状态样式
            menuItem.setBackgroundColor(Color.TRANSPARENT)
            // 使用固定的主题特色图标颜色，而不是当前应用的主题颜色
            icon?.imageTintList = ColorStateList.valueOf(getThemeIconColor(theme))
            text?.setTextColor(colors.menuTextColor)
        }
    }
    
    /**
     * 获取主题固有的图标颜色（不受当前应用主题影响）
     */
    private fun getThemeIconColor(theme: ThemeManager.Theme): Int {
        return when (theme) {
            ThemeManager.Theme.CHINA_RED -> Color.parseColor("#DC143C") // 中国红
            ThemeManager.Theme.VIBRANT_ORANGE -> Color.parseColor("#FF6B35") // 活力橙
            ThemeManager.Theme.TECH_BLUE -> Color.parseColor("#00D4FF") // 科技蓝
        }
    }
    
    /**
     * 强制设置图标颜色，确保图标颜色与当前主题保持一致
     * 修复：图标应该与当前主题颜色一样，不应该因切换而切换
     */
    private fun forceSetIconColors(theme: ThemeManager.Theme) {
        // 获取当前主题的固有图标颜色（不受应用主题影响）
        val themeColor = getThemeIconColor(theme)
        
        // 设置头部图标 - 使用主题固有颜色，确保主题一致性
        val headerIcon = miniNavHeader.findViewById<ImageView>(R.id.mini_header_icon)
        headerIcon?.imageTintList = ColorStateList.valueOf(themeColor)
        
        // 设置菜单项1的图标（选中状态 - 白色，提供更好的对比度）
        val menuIcon1 = miniMenuItem1.findViewById<ImageView>(R.id.mini_menu_icon)
        menuIcon1?.imageTintList = ColorStateList.valueOf(Color.WHITE)
        
        // 设置菜单项2的图标（未选中状态 - 使用该主题的固有颜色）
        val menuIcon2 = miniMenuItem2.findViewById<ImageView>(R.id.mini_menu_icon_2)
        menuIcon2?.imageTintList = ColorStateList.valueOf(themeColor)
        
        // 设置菜单项3的图标（未选中状态 - 使用该主题的固有颜色）
        val menuIcon3 = miniMenuItem3.findViewById<ImageView>(R.id.mini_menu_icon_3)
        menuIcon3?.imageTintList = ColorStateList.valueOf(themeColor)
    }
    
    /**
     * 创建选中状态菜单背景
     */
    private fun createSelectedMenuBackground(colors: NavigationThemeManager.NavigationThemeColors): GradientDrawable {
        val gradient = GradientDrawable(
            GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(
                Color.argb(77, Color.red(colors.primaryColor), Color.green(colors.primaryColor), Color.blue(colors.primaryColor)),
                Color.argb(45, Color.red(colors.primaryColor), Color.green(colors.primaryColor), Color.blue(colors.primaryColor))
            )
        )
        gradient.cornerRadius = 16f
        return gradient
    }
    
    /**
     * 创建包含左侧指示条的选中状态背景，避免布局偏移
     */
    private fun createSelectedMenuBackgroundWithIndicator(colors: NavigationThemeManager.NavigationThemeColors): GradientDrawable {
        // 创建带有左侧边框的选中背景，避免添加额外的View导致布局偏移
        val gradient = GradientDrawable(
            GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(
                Color.argb(77, Color.red(colors.primaryColor), Color.green(colors.primaryColor), Color.blue(colors.primaryColor)),
                Color.argb(45, Color.red(colors.primaryColor), Color.green(colors.primaryColor), Color.blue(colors.primaryColor))
            )
        )
        gradient.cornerRadius = 16f
        
        // 添加左侧主题色边框作为指示条效果
        gradient.setStroke(2, colors.primaryColor)
        
        return gradient
    }
    
    /**
     * 清除动态添加的子视图，防止布局偏移
     */
    private fun clearDynamicViews(menuItem: LinearLayout) {
        try {
            // 移除任何动态添加的指示条View
            // 原始布局只应该包含ImageView和TextView
            val childrenToRemove = mutableListOf<View>()
            for (i in 0 until menuItem.childCount) {
                val child = menuItem.getChildAt(i)
                // 如果不是ImageView或TextView，就是动态添加的，需要移除
                if (child !is ImageView && child !is TextView) {
                    childrenToRemove.add(child)
                }
            }
            childrenToRemove.forEach { menuItem.removeView(it) }
        } catch (e: Exception) {
            Log.d("ThemePreviewComponent",
                "Clear dynamic views failed: ${e.message}")
        }
    }
    
    /**
     * 添加选中指示条 (已弃用 - 现在使用LayerDrawable背景避免布局偏移)
     */
    @Deprecated("Use createSelectedMenuBackgroundWithIndicator instead")
    private fun addSelectionIndicator(menuItem: LinearLayout, colors: NavigationThemeManager.NavigationThemeColors) {
        // 这个方法已经被createSelectedMenuBackgroundWithIndicator替代
        // 保留此方法是为了向后兼容，但不应该被调用
    }
    
    /**
     * 设置点击效果
     */
    fun setOnThemeClickListener(theme: ThemeManager.Theme, listener: (ThemeManager.Theme) -> Unit) {
        setOnClickListener {
            // 添加点击动画效果
            animate()
                .scaleX(0.95f)
                .scaleY(0.95f)
                .setDuration(100)
                .withEndAction {
                    animate()
                        .scaleX(1.0f)
                        .scaleY(1.0f)
                        .setDuration(100)
                        .withEndAction {
                            listener(theme)
                        }
                        .start()
                }
                .start()
        }
    }
}